<template>
  <div>
    <el-row v-if="costList && costList.length" :gutter="10" type="flex" class="cost-list">
      <el-col v-for="item in costList" :span="8" :key="item.id">
        <div :class="{'isCheck':item.check}" class="cost-item">
          <div v-if="!showMobilePage" class="cost-icon">
            <img :src="getImage(item.id)" alt="">
          </div>
          <div class="content">
            <div :title="item.name" class="title ellipsisOne">{{ item.name }}</div>
            <div :class="{ 'num-active': item.costOrder > 0 || item.costNum > 0 }" class="num" style="display:flex;flex-wrap:wrap;">
              <div style="margin-right:10px;">订单: <span class="num-lable">{{ item.costOrder }}</span></div>
              <div>成本: <span class="num-lable">{{ item.costNum || 0 }}</span></div>
            </div>
            <el-tooltip v-if="item.remark && item.remark.length > 18" placement="top">
              <div slot="content" style="max-width: 260px; line-height: 18px;">{{ item.remark }}</div>
              <div class="remark">{{ item.remark }}</div>
            </el-tooltip>
            <div v-else class="remark">{{ item.remark || `暂无${item.name}的简介` }}</div>
          </div>
          <div v-if="(item.costOrder || item.costNum || isInvite)" class="btn-box">
            <div :class="{'isCheck': item.check, 'disabled': item.costOrder === 0 && !item.costNum && !isInvite }" class="btn" @click="selectCost(item)">
              {{ item.check?'已选择':'请选择' }}
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <EmptyPlaceholder v-else :empty-img="emptyIcon" text="该成本来源暂无成本项" style="margin-top: 20px" image-size="120px" />
  </div>
</template>
<script>
import { mapState } from 'vuex';
// components
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
// img
import serviceCostIcon from '@/assets/settlement/service_cost_icon.png';
import channelCostIcon from '@/assets/settlement/channel_cost_icon.png';
import expertCostIcon from '@/assets/settlement/expert_cost_icon.png';
import serviceTwoCostIcon from '@/assets/settlement/service_two_cost_icon.png';
import starMapIcon from '@/assets/settlement/star_map_icon.png';
import fansIcon from '@/assets/settlement/fans_icon.png';
import douCostIcon from '@/assets/settlement/dou_cost_icon.png';
import mircTaskIcon from '@/assets/settlement/mirc_task_icon.png';
import diyIcon from '@/assets/settlement/diy_icon.png';
import emptyIcon from '@/assets/empty-table-data.png';
export default {
  components: { EmptyPlaceholder },
  props: {
    costList: {
      type: Array,
      default: () => []
    },
    isInvite: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      emptyIcon,
      serviceCostIcon,
      channelCostIcon,
      expertCostIcon,
      serviceTwoCostIcon,
      diyIcon,
      starMapIcon,
      fansIcon,
      douCostIcon,
      mircTaskIcon
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    selectCost(item) {
      this.$set(item, 'check', !item.check);
      this.$forceUpdate();
    },
    getImage(id) {
      switch (id) {
        case 1:
          return this.channelCostIcon;
        case 2:
          return this.expertCostIcon;
        case 3:
          return this.serviceCostIcon;
        case 4:
          return this.serviceTwoCostIcon;
        case 5:
          return this.starMapIcon;
        case 6:
          return this.fansIcon;
        case 7:
          return this.douCostIcon;
        case 8:
          return this.mircTaskIcon;
        default:
          return this.diyIcon;
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.cost-list {
  display: flex;
  flex-wrap: wrap;
  .cost-icon {
    margin-right: 12px;
    img {
      width: 48px;
      height: 48px;
    }
  }
  .cost-item {
    display: flex;
    align-items: center;
    height: 140px;
    padding: 0 22px 0 20px;
    border: 1px solid #E6EDFF;
    margin-bottom: 10px;
    font-size: 14px;
    border-radius: 4px;
    &.isCheck {
      background: #FAFBFF;
    }
    .btn-box {
      height: 100%;
      display: flex;
      align-items: center;
    }
    .btn {
      height: 30px;
      width: 80px;
      margin-left: 19px;
      line-height: 30px;
      text-align: center;
      background-color: #406EFF;
      border-radius: 4px;
      font-size: 14px;
      cursor: pointer;
      color: #ffffff;
      &.isCheck {
        opacity: 0.31;
      }
       &.disabled {
        cursor: not-allowed;
        opacity: 0.4;
      }
    }
  }
}
.content {
  flex: 1;
  .title {
    color: #333333;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 14px;
  }
  .num {
    color: #999;
    font-size: 14px;
    margin-bottom: 8px;
    .num-lable {
      color: #999999;
      font-size: 16px;
    }
    &.num-active {
      .num-lable {
        color: #5F77C3;
        font-family: DIN Alternate, DIN Alternate-Bold;
      }
    }
  }
  .remark {
    font-size: 14px;
    color: #999;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    line-height: 1.4;
  }
}
</style>
